<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragment/headFragment:: head"></div>
<body class="cbp-spmenu-push">
<div class="main-content">
	<!--left-fixed -navigation-->
	<div th:replace="fragment/left_sidebar:: left_sidebar"></div>
	<!--left-fixed -navigation-->
	<!-- header-starts -->
	<div class="sticky-header header-section ">
		<div class="header-left">
			<!--toggle button start-->
			<button id="showLeftPush"><i class="fa fa-bars"></i></button>
			<!--toggle button end-->
			<!--logo -->
			<div class="logo">
				<a href="index.html">
					<h1>NOVUS</h1>
					<span>AdminPanel</span>
				</a>
			</div>
			<!--//logo-->
			<!--search-box-->
			<div class="search-box">
				<form class="input">
					<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
					<label class="input__label" for="input-31">
						<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
							<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
						</svg>
					</label>
				</form>
			</div><!--//end-search-box-->
			<div class="clearfix"> </div>
		</div>
		<div class="header-right">
			<div class="profile_details_left"><!--notifications of menu start -->
				<ul class="nofitications-dropdown">
					<li class="dropdown head-dpdn">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">3</span></a>
						<ul class="dropdown-menu">
							<li>
								<div class="notification_header">
									<h3>You have 3 new messages</h3>
								</div>
							</li>
							<li><a href="#">
								<div class="user_img"><img src="images/1.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet</p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li class="odd"><a href="#">
								<div class="user_img"><img src="images/2.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet </p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li><a href="#">
								<div class="user_img"><img src="images/3.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet </p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li>
								<div class="notification_bottom">
									<a href="#">See all messages</a>
								</div>
							</li>
						</ul>
					</li>
					<li class="dropdown head-dpdn">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a>
						<ul class="dropdown-menu">
							<li>
								<div class="notification_header">
									<h3>You have 3 new notification</h3>
								</div>
							</li>
							<li><a href="#">
								<div class="user_img"><img src="images/2.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet</p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li class="odd"><a href="#">
								<div class="user_img"><img src="images/1.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet </p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li><a href="#">
								<div class="user_img"><img src="images/3.png" alt=""></div>
								<div class="notification_desc">
									<p>Lorem ipsum dolor amet </p>
									<p><span>1 hour ago</span></p>
								</div>
								<div class="clearfix"></div>
							</a></li>
							<li>
								<div class="notification_bottom">
									<a href="#">See all notifications</a>
								</div>
							</li>
						</ul>
					</li>
					<li class="dropdown head-dpdn">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">15</span></a>
						<ul class="dropdown-menu">
							<li>
								<div class="notification_header">
									<h3>You have 8 pending task</h3>
								</div>
							</li>
							<li><a href="#">
								<div class="task-info">
									<span class="task-desc">Database update</span><span class="percentage">40%</span>
									<div class="clearfix"></div>
								</div>
								<div class="progress progress-striped active">
									<div class="bar yellow" style="width:40%;"></div>
								</div>
							</a></li>
							<li><a href="#">
								<div class="task-info">
									<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
									<div class="clearfix"></div>
								</div>
								<div class="progress progress-striped active">
									<div class="bar green" style="width:90%;"></div>
								</div>
							</a></li>
							<li><a href="#">
								<div class="task-info">
									<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
									<div class="clearfix"></div>
								</div>
								<div class="progress progress-striped active">
									<div class="bar red" style="width: 33%;"></div>
								</div>
							</a></li>
							<li><a href="#">
								<div class="task-info">
									<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
									<div class="clearfix"></div>
								</div>
								<div class="progress progress-striped active">
									<div class="bar  blue" style="width: 80%;"></div>
								</div>
							</a></li>
							<li>
								<div class="notification_bottom">
									<a href="#">See all pending tasks</a>
								</div>
							</li>
						</ul>
					</li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<!--notification menu end -->
			<div class="profile_details">
				<ul>
					<li class="dropdown profile_details_drop">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
							<div class="profile_img">
								<span class="prfil-img"><img src="images/a.png" alt=""> </span>
								<div class="user-name">
									<p>Wikolia</p>
									<span>Administrator</span>
								</div>
								<i class="fa fa-angle-down lnr"></i>
								<i class="fa fa-angle-up lnr"></i>
								<div class="clearfix"></div>
							</div>
						</a>
						<ul class="dropdown-menu drp-mnu">
							<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
							<li> <a href="#"><i class="fa fa-user"></i> Profile</a> </li>
							<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="clearfix"> </div>
	</div>
	<!-- //header-ends -->
	<!-- main content start-->
	<div id="page-wrapper">
		<div class="main-page">
			<div class="panel-body widget-shadow">
				<h4>Basic Table:</h4>
				<table class="table">
					<thead>
					<tr>
						<th>#</th>
						<th>nickName</th>
						<th>realName</th>
						<th>email</th>
						<th>operation</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="cs, rowInfo : ${lists}">
						<td th:text="${rowInfo.count}"></td>
						<td th:text="${cs.getEmail()}"></td>
						<td th:text="${cs.getNickname()}"></td>
						<td th:text="${cs.getRealname()}"></td>
						<td>
							<a th:href="@{/customerService/update(customerserviceid = ${cs.getCustomerserviceid()})}">修改</a>
							<a th:href="@{/customerService/delete(customerserviceid = ${cs.getCustomerserviceid()})}">删除</a>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="row calender widget-shadow">
				<h4 class="title">日历</h4>
				<div class="cal1">
				</div>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		<p>Copyright &copy; 2021.Igeek All rights reserved.</p>
	</div>
	<!--//footer-->
</div>
<!-- Classie -->
<script src="js/classie.js"></script>
<script>
	var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
			showLeftPush = document.getElementById( 'showLeftPush' ),
			body = document.body;

	showLeftPush.onclick = function() {
		classie.toggle( this, 'active' );
		classie.toggle( body, 'cbp-spmenu-push-toright' );
		classie.toggle( menuLeft, 'cbp-spmenu-open' );
		disableOther( 'showLeftPush' );
	};


	function disableOther( button ) {
		if( button !== 'showLeftPush' ) {
			classie.toggle( showLeftPush, 'disabled' );
		}
	}
</script>
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>